<template>
	<view class="banmi_flex j-c">
		<view class="uni-popup-dialog" @click="on_is_tan"
			:style="'width:'+w_windowWidth+'px;'+'height:'+ h_windowHeight +'px' ">
			<view class="uni-dialog-title p-10">
				<text class="f-18">{{t_name}}</text>
			</view>
			<view class="p-10" :style="'height:'+ (h_windowHeight- 125) +'px' ">
				<view class="banmi_flex" style="height: 100%;">
					<view v-if="!mobile" class="p-10" style="background-color: #F7F8FA;width: 20%;">
						<view class="p-10 f-14  " @click="on_update_group(-1)"
							:class="group_index==-1 ? 'update_groupxz' : ''">
							<text>全部{{t_name}}</text>
						</view>
						<view class="p-10 f-14" :class="index==group_index ? 'update_groupxz' : ''"
							v-for="(vo,index) in wx_group_list" @click="on_update_group(index)" :key="index">
							<text>{{vo.name}}</text>
						</view>
						<view class="" style="position: absolute;bottom: 80px;">
							<button @click="on_news" class="f-14 banmi_flex a-c j-c b_y cff"
								style="background-color: #1E90FF;width: 160px;height: 30px;border-radius: 5px;margin-left: 0px;">
								新建分组 +
							</button>
						</view>
					</view>
					<view class="w-100">
						<view class="banmi_flex  a-c m-l-10">
							<view class="w-40">
								<input class="p-10 b_y w-100 f-14" type="text" placeholder="请输入要搜索的名称"
									style="border: solid 1rpx #DCDCDC;">
							</view>
							<view class="banmi_flex m-l-10">
								<button class="banmi_flex a-c j-c popup-image-keyword-b">
									<text class="f-14">搜索</text>
								</button>
								<button @click="on_img" class="m-l-10">
									<view class="f-14 banmi_flex a-c j-c popup-image-up-b">
										<text class="cff f-14">上传{{t_name}}</text>
									</view>
								</button>
							</view>
						</view>

						<view class=" " style="height: 91%;">
							<scroll-view class="w-100" scroll-y="true" style="height: 100%;">
								<view class="popup-image-classify w-100">
									<view @mousemove="on_img_index(index)" class="popup-image-classify-list"
										v-for="(vo,index) in wx_list" :key="index">
										<view class="t-c">
											<image @click="on_choice(index)" v-if="vo.type=='image'"
												:class="img_index==index?'popup-image-up-list-img':'popup-image-up-list-img-s'"
												:src="vo.attachment"></image>
											<video :controls="false" :show-fullscreen-btn="false"
												:class="img_index==index ? 'popup-image-up-list-img':'popup-image-up-list-img-s'"
												v-if="vo.type=='video'" :show-center-play-btn="false"
												:show-play-btn="false" :id="'videoId'+index" @play="play(index)"
												@fullscreenchange="fullscreenchange" :src="vo.attachment">
											</video>
											<view class="banmi_flex j-c a-c" v-if="vo.type=='music'||vo.type=='voice'"
												:class="img_index==index ? 'popup-image-up-list-img':'popup-image-up-list-img-s'">
												<image v-if="!vo.is_play" @click="on_play(index)"
													style="width: 100rpx;height: 100rpx;" src="@/static/play.png"
													mode=""></image>
												<image v-if="vo.is_play" @click="mp3_for(index)"
													style="width: 100rpx;height: 100rpx;" src="@/static/playing.png"
													mode=""></image>
											</view>

											<view class="yihang" style="width: 122px;">
												<text>{{vo.filename}}</text>
											</view>
										</view>
										<template v-if="img_index==index||vo.ischoice">
											<view class="banmi_flex a-c j-c"
												:class="vo.ischoice ? 'set-leftc' : 'set-left'"
												@click="on_choice(index)">
												<text v-if="vo.ischoice" style="color: #fff;">✓</text>
											</view>
											<view @click="previewImage(index)" class="set-center banmi_flex a-c j-c">
												<image style="width: 15px;height: 15px;" src="@/static/kuoda.png"
													mode="">
												</image>
											</view>
											<view class="set-right banmi_flex a-c j-c">
												<view class="banmi_flex j-c a-c" style="position: relative;">
													<image @tap="on_more(index )" style="width: 25px;height: 25px;"
														src="@/static/more1.png" mode="">
													</image>
													<view v-if="vo.is_tan" class="set-tan" style="background-color: #fff;
														width: 100px;z-index: 88;
														height: 150px;">
														<view @click="on_rename(index)" class="f-14 p-10"
															style="padding-top: 25px;">
															重命名
														</view>
														<view class="f-14 p-10" @click="on_group_fenzu(index)">
															移动分组
														</view>
														<view @click="on_img_del(index)" class="f-14 p-10">
															删除
														</view>

													</view>
												</view>
											</view>
										</template>

									</view>
									<view class="banmi_flex j-c a-c p3" style="width:99%;" v-if="wx_list.length==0">
										<text class="c-7  ">暂无附件</text>
									</view>
								</view>
								<view style="width: 100%;">
									<uni-pagination @change="getPage" show-icon="true" :total="total" current="1"
										style="float: left;margin-bottom: 10px;"></uni-pagination>
								</view>

							</scroll-view>
						</view>
					</view>
				</view>


				<view class="banmi_flex a-c p-10">
					<button class="uni-dialog-button  " @click="close">
						<text>关闭</text>
					</button>
					<button class="uni-dialog-button uni-border-left" @click="onplay">
						<text class="uni-dialog-button-text uni-button-color">添加</text>
					</button>
				</view>
			</view>





			<uni-popup ref="alertDialog_beizhu" type="dialog">
				<uni-popup-beizhu @confirm="on_ajax_ok" :name="name">
				</uni-popup-beizhu>
			</uni-popup>
			<uni-popup ref="alertDialog_fenzu" type="dialog">
				<uni-popup-fenzu @confirm="on_group_ok" :li="wx_group_list" :name="name">
				</uni-popup-fenzu>
			</uni-popup>
		</view>

	</view>
	</view>
</template>

<script>
	import popup from '../uni-popup/popup.js'
	import {
		initVueI18n
	} from '@dcloudio/uni-i18n'
	import messages from '../uni-popup/i18n/index.js'
	const {
		t
	} = initVueI18n(messages)

	export default {
		name: "uniPopupDialog",
		mixins: [popup],
		emits: ['confirm', 'close'],
		props: {
			t_name: {
				type: [String, Number],
				default: ''
			},
			t_type: {
				type: [String, Number],
				default: ''
			},
		},

		data() {
			return {
				dialogType: 'error',
				focus: false,
				val: "",
				tabidnex: 1,
				duration: 300,
				zd_price: 0,
				group_index: '-1',
				showTrans: false,
				key: '',
				img_index: '',
				wx_list: [],
				name: '名称',
				total: 2,
				maskClass: {
					position: 'fixed',
					bottom: 0,
					top: 0,
					left: 0,
					right: 0,
					backgroundColor: 'rgba(0, 0, 0, 0.4)'
				},
				transClass: {
					position: 'fixed',
					left: 0,
					right: 0
				},
				maskShow: true,
				is_tan: false,
				keya: '',
				wx_group_list: [],
				page: 1,
				reply_list: [],
				is_mp3: false,
				w_windowWidth: 0,
				h_windowHeight: 0,
				mobile: '',

			}
		},
		computed: {
			okText() {
				return this.confirmText || t("uni-popup.ok")
			},
			closeText() {
				return this.cancelText || t("uni-popup.cancel")
			},
			placeholderText() {
				return this.placeholder || t("uni-popup.placeholder")
			},
			titleText() {
				return this.title || t("uni-popup.title")
			}
		},
		watch: {
			type(val) {
				this.dialogType = val
			},
			mode(val) {
				if (val === 'input') {
					this.dialogType = 'info'
				}
			},
			value(val) {
				this.val = val
			}
		},
		created() {
			var info = uni.getWindowInfo();
			this.h_windowHeight = info.windowHeight / 1.3;
			if (navigator.userAgent.indexOf('Mobile') > -1) {
				this.w_windowWidth = info.windowWidth - 20;
				this.mobile = true;
			} else {
				this.w_windowWidth = info.windowWidth / 1.3;
				this.mobile = false;
			}
			this.group_id = 0;
			this.init();
			// 对话框遮罩不可点击
			this.popup.disableMask()
			// this.popup.closeMask()
			if (this.mode === 'input') {
				this.dialogType = 'info'
				this.val = this.value
			} else {
				this.dialogType = this.type
			}
			this.is_mp3 = false;
		},


		methods: {
			mp3_for() {
				for (var i = 0; i < this.wx_list.length; i++) {
					this.wx_list[i]['is_play'] = false;
				}
				if (this.is_mp3) {
					this.innerAudioContext.stop();
				}
			},
			on_play(index) {
				this.mp3_for();
				var mp3 = this.wx_list[index]['attachment'];
				var that = this;
				if (!this.wx_list[index]['is_play']) {
					this.wx_list[index]['is_play'] = true;
					this.innerAudioContext = uni.createInnerAudioContext();
					this.innerAudioContext.autoplay = true;
					this.innerAudioContext.src = mp3;
					that.is_mp3 = true;
					this.innerAudioContext.onPlay(() => {

					});
				} else {
					that.is_mp3 = false;
					this.wx_list[index]['is_play'] = false;
					this.innerAudioContext.stop();
				}


			},
			async on_group_ok(group_id) {
				let requestParams = {
					group_id: group_id,
					id: this.id
				};
				const ret = await this.Banmikeji.Upload_aattachment_wx_group_grouping(requestParams);
				uni.showToast({
					title: ret.msg,
					icon: 'none'
				})
			},
			on_group_fenzu(index) {
				this.id = this.wx_list[index]['id'];
				this.$refs.alertDialog_fenzu.open()
			},
			on_update_group(index) {
				this.group_index = index;
				if (index == -1) {
					this.group_id = 0;
				} else {
					this.group_id = this.wx_group_list[index]['group_id'];
				}
				this.page = 1;
				this.init();
			},
			on_ajax_ok(val) {
				if (this.keya == 'news') {
					this.on_ajax_news(val);
					return
				} else if (this.keya == 'rename') {
					this.on_ajax_re(val);
				}
			},
			async on_ajax_news(val) {
				let requestParams = {
					name: val,
					t_type: this.t_type
				};
				const ret = await this.Banmikeji.Upload_aattachment_group_add(requestParams);
				uni.showToast({
					title: ret.msg,
					icon: 'none'
				})
				this.init();
				this.$refs.alertDialog_beizhu.close()
			},
			on_img_del(index) {
				var that = this;
				var img_id = this.wx_list[index]['id'];
				uni.showModal({
					title: '提示',
					content: '确定要删除吗？',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '正在删除中...'
							})
							that.img_del(img_id);
						}
					}
				});


			},
			async img_del(id) {
				var that = this;
				let requestParams = {
					id: id
				};
				const ret = await this.Banmikeji.Upload_attachment_wx_img_del(requestParams);
				that.$refs.alertDialog_beizhu.close()
				if (ret.status == 200) {
					that.wx_list = that.wx_list.filter(t => t.id != id);
				}
				uni.hideLoading();

			},
			async on_ajax_re(val) {
				let requestParams = {
					filename: val,
					id: this.img_id
				};
				const ret = await this.Banmikeji.Upload_attachment_name_edit(requestParams);
				this.$refs.alertDialog_beizhu.close()
				this.wx_list[this.index]['filename'] = val;
			},
			on_news() {
				this.name = '添加分组名称';
				this.keya = 'news';
				this.$refs.alertDialog_beizhu.open()
			},
			on_rename(index) {
				this.keya = 'rename';
				this.index = index;
				this.img_id = this.wx_list[index]['id'];
				this.$refs.alertDialog_beizhu.open()
			},

			getPage(res) {

				this.page = res.current;
				this.init()
			},
			async init() {
				let requestParams = {
					page: this.page,
					group_id: this.group_id,
					t_type: this.t_type
				};
				const ret = await this.Banmikeji.Upload_attachment_list(requestParams);
				this.wx_list = ret.data.img_list.data;
				this.wx_group_list = ret.data.wx_group_list;
				this.total = ret.data.img_list.total;


			},
			on_is_tan() {

				if (this.is_tan) {
					this.is_tan = false;
					this.on_tan();
				}

			},
			play(index) {
				this.video_id = index;
				this.videoContext = uni.createVideoContext('videoId' + this.video_id, this)
				this.videoContext.requestFullScreen()
				this.videoContext.play()
			},

			fullscreenchange(e) {
				var that = this;
				if (!e.detail.fullScreen) {
					uni.createVideoContext('videoId' + this.video_id, this).pause();
				}
			},

			previewImage(index) {

				if (this.t_type == 'video') {
					this.play(index)
					return
				}

				let img_list = [];

				img_list.push(this.wx_list[index]['attachment'])

				//uniapp预览轮播图
				uni.previewImage({
					current: 0, //预览图片的下标
					urls: img_list //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},

			on_more(index) {

				var that = this;
				setTimeout(function() {
					that.is_tan = true;
					that.wx_list[index]['is_tan'] = true;
				}, 100);

			},
			on_tan() {
				for (var i = 0; i < this.wx_list.length; i++) {
					this.wx_list[i]['is_tan'] = false
				}
			},
			on_choice(index) {
				this.on_tan();
				this.wx_list[index]['ischoice'] = !this.wx_list[index]['ischoice'];
				var reply_list = this.reply_list;
				if (this.wx_list[index]['ischoice']) {

					reply_list.push(this.wx_list[index]);
				} else {
					this.reply_list = this.reply_list.filter(t => t.id != this.wx_list[index]['id']);
				}

			},
			on_img_index(index) {
				this.img_index = index;
			},
			on_music() {
				var that = this;
				uni.chooseFile({
					count: 1, //选取的文件个数限制
					extension: [".mp3"], //可定义允许哪些后缀的文件可被选择
					success: function(res) {
						console.log("res: " + JSON.stringify(res));

						let tempFilePaths = res.tempFilePaths;
						that._Upload(tempFilePaths[0])

					},
				});
			},
			on_video() {
				var that = this;
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					success: function(res) {

						var src = res.tempFilePath;
						that._Upload(src)
					}
				});
			},
			on_img() {
				if (this.t_type == 'video') {
					this.on_video();
					return
				} else if (this.t_type == 'music' || this.t_type == 'voice') {
					this.on_music();
					return
				}

				var that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: res => {
						const tempFilePaths = res.tempFilePaths;
						that._Upload(tempFilePaths[0])

					}
				});
			},
			_Upload(path) {
				uni.showLoading({
					title: '正在上传中...'
				})

				var that = this;
				var img_list = new Array();
				var map = {
					path: path,
				};
				img_list.push(map);
				this.Bmupload.upload({
					files: img_list, // 必填 临时文件路径 格式: [{path: "图片地址"}]
					load: true,
					maxSize: 300000,
					typeo: 'wx',
					group_id: that.group_id,
					t_type: that.t_type,
					onEachUpdate: res => {

					},
					onProgressUpdate: res => {


					}
				}).then(res => {

					uni.hideLoading();
					that.shop_img = res[0];
					that.page = 1;
					that.init();

				});
			},
			onplay() {

				this.$emit('on_add_img', this.reply_list);
				this.popup.close()
				this.mp3_for();

			},

			/**
			 * 点击确认按钮
			 */
			onOk() {
				this.mp3_for();
				if (this.mode === 'input') {
					this.$emit('confirm', this.val)
				} else {
					this.$emit('confirm')
				}
				if (this.beforeClose) return
				this.popup.close()
			},
			/**
			 * 点击取消按钮
			 */
			closeDialog() {
				this.$emit('close')
				if (this.beforeClose) return
				this.popup.close()
			},
			close() {

				this.popup.close()
				this.mp3_for();
			}
		}
	}
</script>


<style lang="scss">
	button::after {
		border: none;
	}

	button {
		background-color: initial;
	}

	.classify-liv {
		text-align: center;
		align-items: center;
		padding-bottom: 10px;
		border: solid 2px #FD9A01;
		text-align: center;
		color: #999;
		border-radius: 10px;
		width: 200px;
		font-size: 24upx;
		margin: 10;

	}

	.classify-lixzlv {
		text-align: center;
		align-items: center;
		padding-bottom: 10px;
		border: solid 2px #999;

		color: #999;
		border-radius: 10px;
		width: 200px;
		font-size: 24upx;
		margin: 10;

	}

	.uni-popup-dialog {

		height: 550px;

		border-radius: 11px;
		background-color: #fff;
	}

	.uni-dialog-title {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		banmi_flex-direction: row;
		justify-content: center;
		padding-top: 25px;
	}

	.uni-dialog-title-text {
		font-size: 16px;
		font-weight: 500;
	}



	.update_wx_li {
		flex: 0 0 5%;

		font-size: 24upx;
		margin: 10px;
	}

	.uni-dialog-content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding-top: 10px;
	}

	.set-leftc {
		text-align: center;
		height: 20px;
		width: 20px;
		background: #1E90FF;
		position: absolute;
		top: 10px;
		left: 10px;
		border-radius: 2px;
		font-size: 12px;
		z-index: 99999;
	}

	.set-left {
		text-align: center;
		height: 20px;
		width: 20px;
		background: rgba(0, 0, 0, 0.8);
		border: solid 3rpx #09BB07;
		position: absolute;
		top: 10px;
		left: 10px;
		border-radius: 2px;
		font-size: 12px;
		z-index: 99999;
	}

	.set-right {
		text-align: center;
		height: 25px;
		width: 25px;
		border-radius: 12px;
		background: #F5F5F5;
		color: #000;
		position: absolute;
		top: 8px;
		right: 10px;
		font-size: 20px;
		z-index: 99;
	}

	.set-tan {
		text-align: center;
		height: 25px;
		width: 25px;
		border-radius: 3px;
		border: solid 1rpx #DCDCDC;
		color: #000;
		position: absolute;
		top: 40px;
		left: -80px;
		font-size: 20px;
		z-index: 99999;
	}

	.set-center {
		text-align: center;
		height: 25px;
		width: 25px;
		border-radius: 12px;
		background: #F5F5F5;
		color: #000;
		position: absolute;
		top: 8px;
		right: 50px;
		font-size: 20px;
		z-index: 88;
	}

	.uni-dialog-content-text {
		font-size: 14px;
		color: #6C6C6C;
	}

	.f20 {
		font-size: 24px;
	}

	.uni-dialog-button-group {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		banmi_flex-direction: row;
		border-top-color: #f5f5f5;
		border-top-style: solid;
		border-top-width: 1px;
	}

	.uni-dialog-button {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */

		flex: 1;
		banmi_flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 45px;
	}



	.uni-dialog-button-text {
		font-size: 16px;
		color: #333;
	}

	.uni-button-color {
		color: #007aff;
	}



	.uni-dialog-input {
		banmi_flex: 1;
		font-size: 14px;
		border: 1px #eee solid;
		height: 40px;
		padding: 0 10px;
		border-radius: 5px;
		color: #555;
	}

	.uni-popup__success {
		color: #4cd964;
	}

	.uni-popup__warn {
		color: #f0ad4e;
	}

	.uni-popup__error {
		color: #dd524d;
	}

	.uni-popup__info {
		color: #909399;
	}

	.update_groupxz {
		color: #1E90FF;
		border-bottom: solid 2px #1E90FF;
	}
</style>